<template>
    <div>
        <gauge-Charts :viewData="echartsData"></gauge-Charts>
        <!-- md -->
        <div class="markdown-body">
            <gaugeChartsMD></gaugeChartsMD>
        </div>
    </div>
</template>
<script>
import gaugeChartsMD from "../md/gaugeChartsMD.md"
import gaugeCharts from "@/home/echart/gaugeCharts"
export default {
    components:{
        gaugeChartsMD,
        gaugeCharts
    },
    data() {
        return {
            echartsData:{
                viewTitle:"仪表盘",//标题 必填
                viewHeight:'640px',//图形高度，必填
                seiveApi:'',//接口方法
                serachParam:{},
                options:{
                    series: [{
                        type: 'gauge',
                        center: ["50%", "60%"],
                        startAngle: 200,
                        endAngle: -20,
                        min: 0,
                        max: 60,
                        splitNumber: 12,
                        itemStyle: {
                            color: '#FFAB91'
                        },
                        progress: {
                            show: true,
                            width: 30
                        },

                        pointer: {
                            show: false,
                        },
                        axisLine: {
                            lineStyle: {
                                width: 30
                            }
                        },
                        axisTick: {
                            distance: -45,
                            splitNumber: 5,
                            lineStyle: {
                                width: 2,
                                color: '#999'
                            }
                        },
                        splitLine: {
                            distance: -52,
                            length: 14,
                            lineStyle: {
                                width: 3,
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            distance: -20,
                            color: '#999',
                            fontSize: 20
                        },
                        anchor: {
                            show: false
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            width: '60%',
                            lineHeight: 40,
                            height: '15%',
                            borderRadius: 8,
                            offsetCenter: [0, '-15%'],
                            fontSize: 60,
                            fontWeight: 'bolder',
                            formatter: '{value}%',
                            color: 'auto'
                        },
                        data: [{
                            value: 20
                        }]
                    }],
                }
            }
        };
    },
    methods: {
        
    }
}
</script>